<template>
	<!-- <Navbar></Navbar> -->
	<view class="orderListIndex">
		<u-tabs :list="tabsdata" lineWidth="20" lineHeight="7" @change="currentChange"
			:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
		        color: '#303133',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }" :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1)'
		    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		
		<view class="orderList">	
			<view  v-for="item in orderList">
				<view class="orderItem" v-if="item.orderStatus==currentSubsection || currentSubsection=='全部'" @click="to_order_details(item.id)">
					<view class="orderItem-top">
						<view class="orderItem-left">
							<view class="oder-type">
								{{item.tpye}}
							</view> 
							<p style="">“吾之老”社区共享食堂</p>
						</view>
						<view class="orderItem-right">
							<p style="">{{item.orderStatus}}</p>
						</view>
					</view>
					<view class="orderItem-center">
						<view class="orderItem-left">
							<view class="sp-img">
								<up-image :show-loading="true" :src="item.spImg" width="128px" height="90px"></up-image>
							</view>
							<p class="sp-name">{{item.title}}</p>
						</view>
						<view class="orderItem-right">
							共{{item.number}}件
						</view>
					</view>
					<view class="orderItem-bottom">
						<view class="orderItem-left">
							下单时间：{{item.createTime}}
						</view>
						<view class="orderItem-right">
							合计：<span style="color: red;font-size: 11;">￥</span>{{item.prcSum}}
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script setup>
	// import Navbar from '@/common/navbar/navbar.vue'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const lineBg =
		"";
	
	const to_order_details=(id)=>{
		uni.navigateTo({
			url: "/pages/order/orderDetails/orderDetails?id=" + id
		})
	}
	
	// 顶部tabs数据  
	const tabsdata = reactive([{
			name: '全部'
		},
		// {
		// 	name: '未支付',
		// 	badge: {
		// 		isDot: true
		// 	}
		// },
		// {
		// 	name: '待取餐'
		// },
		// {
		// 	name: '支付成功'
		// },
		// {
		// 	name: '退款中'
		// },
		// {
		// 	name: '已退款'
		// },

		// {
		// 	name: '超时关闭'
		// },
		// {
		// 	name: '用户取消'
		// }
	]);

	//tabs 当前选中的索引
	const currentSubsection = ref('全部');
    //
	// const nowTabs=ref()
	//tabs状态切换
	const currentChange = (obj) => {
		console.log(obj);
		currentSubsection.value = obj.name;
		console.log("当前选中的索引", currentSubsection.value);
	}
	const orderList = ref([{
		"createTime": "2023-09-23 23:38:04",
		"updateTime": "2023-09-23 23:38:04",
		"spImg":"http://hwww.fun:6060/sqst-test/%E5%8D%95%E4%BA%BA%E5%A5%97%E9%A4%90.png",
		"id": 1705,
		"title": "单人套餐",
		"userld": "ST0001",
		"tpye":"食堂",
		"prcSum":"28.8",
		"number":2,
		"orderStatus": "支付成功"
	},
	{
		"createTime": "2023-09-23 23:38:04",
		"updateTime": "2023-09-23 23:38:04",
		"spImg":"http://hwww.fun:6060/sqst-test/%E5%8F%8C%E4%BA%BA.jpg",
		"id": 1706,
		"title": "双人套餐",
		"userld": "ST0001",
		"tpye":"外卖",
		"prcSum":"28.8",
		"number":2,
		"orderStatus": "未支付"
	},
	{
		"createTime": "2023-09-23 23:38:04",
		"updateTime": "2023-09-23 23:38:04",
		"spImg":"http://hwww.fun:6060/sqst-test/%E8%B1%AA%E5%8D%8E%E5%8D%95%E4%BA%BA.jpg",
		"id": 1707,
		"title": "单人套餐",
		"userld": "ST0001",
		"tpye":"食堂",
		"prcSum":"28.8",
		"number":2,
		"orderStatus": "待取餐"
	}
	])
	//生命周期
	onLoad(() => {

	})
</script>

<style scoped>
	.orderListIndex {
		width: 100%;
		margin: 0 auto;
		background-color: white;
	}

	.orderList{
		width: 95%;
		margin: 0 auto;
		background-color: white;
	}
	
	.orderItem{
		width: 100%;
		margin-top: 12px;
		background-color: #F2F2F2;
		padding-top: 12px;
		padding-bottom:1rpx;
	}
	
	.orderItem-top, .orderItem-center , .orderItem-bottom{
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}

	.orderItem-left{
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 9px;
	}
	
	.orderItem-right{
		margin-right: 9px;
	}
	
	.orderItem-top p{
		font-size: 14px;
	}
	.orderItem-top > .orderItem-right >p{
		color: #D9001B;
	}
	
	.sp-name{
		margin-left: 12px;
	}
	.orderItem-center > .orderItem-right{
		font-size: 14px;
	}
	.orderItem-bottom{
		font-size: 13px;
	}
	.orderItem-left > .sp-img{
		width: 128px;
		height: 90px;
		border-radius: 10px;
		overflow: auto;
		background-color: antiquewhite;
	}
	.oder-type{
		padding: 1px;
		padding-left: 9px;
		padding-right: 9px;
		font-size: 8px;
		color: #D9001B;
		border:1px solid #D9001B;
		border-radius:10px;
		margin-right: 23px;
	}
</style>